<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./libs/jquery.js"></script>
  </head>
  <body>
    <script>
      // 原本JQ的写法，成功的回调函数需要写到结构体内部，不方便接口封装
      // $.ajax({
      //   url: 'http://localhost:3000/personalized',
      //   success: (res) => {
      //     console.log(res)
      //   },
      // })

      //  Promise 对象的三个方法
      //     .then()        - 成功
      //     .catch()       - 失败
      //     .finally()     - 不管成功或失败都会执行(但是拿不到值，平时比较少用)
      // 👍 把原本的 JQ 进行 Promise 封装升级
      const p1 = new Promise((resolve, reject) => {
        $.ajax({
          url: 'http://localhost:3000/personalized11',
          // 请求成功
          success: (res) => {
            // resolve 函数调用传递的实参，最终会被 .then 的形参接收到。
            resolve(res)
          },
          // 请求失败(错误)
          error: () => {
            // console.log(2222222222)
            // reject 表示失败
            reject({ msg: '请求失败' })
          },
        })
      })

      console.log(p1)
      p1.then((res) => {
        console.log(res)
      })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          console.log('只是会执行，但是拿不到成功或失败传出来的值')
        })
    </script>
  </body>
</html>
